<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>云打印</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../static/jquery-ui-1.12.1/jquery-ui.min.css" >
    <link rel="stylesheet" href="../../../static/vui/css/vui.css">
    <link rel="stylesheet" href="../../../static/css/print/print_add.css" >

    <style>
        .vui-table .vui-table-cell {
            border: 1px solid #000000;
        }
        .button {
            color: #fff;
            background: #30acbb;
            box-sizing: border-box;
            display: inline-block;
            margin-bottom: 0;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            white-space: nowrap;
            line-height: 1.5;
            padding: 4px 15px;
            font-size: 12px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            text-transform: none;
            user-select: none;
            -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
            transition: all .3s cubic-bezier(.645,.045,.355,1);
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            left: 15px;
            top: 15px;
            position: absolute;
        }
        .vui-table-head{
            background: #ffffff;
        }
    </style>
    <script type="text/javascript" src="../../../static/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../../static/vui/js/datagrid.js"></script>
    <script type="text/javascript" src="../../../static/js/common.js"></script>
    <script type="text/javascript" src="../../../static/jquery-ui-1.12.1/jquery-ui.min.js"></script>
</head>
<body style="background: #E8E8E8;padding-top: 15px;box-sizing: border-box;">

<button class="button" id="create"><span>打印</span></button>

    <div id="content" style="margin: 0 auto;position: relative;padding: 0px;background: #Ffffff;">

    </div>

</body>
</html>
<script>
var params = app.getRequestParams();

function beforePrint(){
    $('#create').hide();
    $('#content').css({"position":"absolute","left":"0px","top":"0px"});
}

function afterPrint(){
    $('#create').show();
    $('#content').css({"position":"relative"});
}

$(function () {
    $('#create').click(function () {
        beforePrint();

        window.print();
        afterPrint();
    });

    var data = {id:params.id,bussType:params.bussType};
    data.loginUserId = params.loginUserId;
    data.customerId = params.customerId;
    data.loginCompanyId = params.loginCompanyId;
    data.loginCompanyLogicalCode = params.loginCompanyLogicalCode;
    app.request({
        url:'printOrder/getOrder',
        data:data,
        success:function (resp) {
            if( resp.result ==0 ){
                initPage(resp.data);
            }else{
                app.message(layer,'加载数据失败，请重试');
            }

        }
    });
});

function initPage(data) {
    var order = data.order;
    var details = data.details;
    order = transObj(order);
    order['login.userName'] = decodeURIComponent(params.loginName);
    order['login.companyName'] = decodeURIComponent(params.loginCompanyName);
    order['print.nowtime'] = new Date().getTime();

    var print = JSON.parse(data.print.json);
    var whole = print.whole;
    $('#content').css({"width":whole.width+"mm","height":whole.height+"mm"});

    console.log('pp,,,',print);
    for( var i=0 ; i<print.labels.length ; i++ ){
        initLabel(order,details,print.labels[i],whole);
    }
}

function transObj(order) {
    var o = {};
    for( var n in order ){
        var values = n.split('__');
        if( values[0] == 'o' ){
           o['order.'+toHump(values[1])] = order[n];
        }else if( values[0] == 'cp' ){
            o['company.'+toHump(values[1])] = order[n];
        }else if( values[0] == 'u' ){
            o['user.'+toHump(values[1])] = order[n];
        }else if( values[0] == 'ct' ){
            o['customer.'+toHump(values[1])] = order[n];
        }else if( values[0] == 'vd' ){
            o['vendor.'+toHump(values[1])] = order[n];
        }else if( values[0] == 'od' ){
            o['orderDetail.'+toHump(values[1])] = order[n];
        }else if( values[0] == 'p' ){
            o['product.'+toHump(values[1])] = order[n];
        }else if( values[0] == 'st' ){
            o['store.'+toHump(values[1])] = order[n];
        }else if( values[0] == 'un' ){
            o['unit.'+toHump(values[1])] = order[n];
        }
    }
    return o;
}



function initLabel(order,details,label,whole) {
    var p = label.property;
    var ele = $('<label style="'+label.style+'"></label>');
    if( label.type == 'font' ){
        ele.html(p.txt_name);
    }else if(label.type == 'bind' ){
        ele.html(getDataFormat(p.format,order[label.name]));
    }else if( label.type == 'table' ){
        var columns = [];
        var width = $('#content').width() - 30 - 20 ;
        var columnsFormat = {};
        for( var i=0 ; i<p.table.length ; i++ ){
            columnsFormat[p.table[i].name] = p.table[i].property.format;
            columns.push({field:p.table[i].name,title:p.table[i].text,width:p.table[i].property.width});
        }

        $('#content').append('<div id="table"></div>');
        $('#table').datagrid({
            width:width,pagination:false,
            columns:columns
        });

        $('#table').css({"padding":"0px 15px","position":"absolute","top":label.property.y+"px","left":label.property.x+"px",width:label.property.width+"px",height:label.property.height+"px"});

        $('#table').datagrid('addRows',getTableRows(details,columnsFormat));
        return;
    }
    ele.css({"text-align":p.align.value,"border":"none"});
    if( p.contAlign.value=='center' ){
        ele.css({"left":($('#content').width() - p.width)/2+"px"});
    }

    $('#content').append(ele);
}

function getTableRows(details,columnsFormat) {
    var arr = [];
    for( var i=0 ; i<details.length ; i++ ){
        var detail = details[i];
        var o = transObj(detail);
        for( var n in o ){
            o[n] = getDataFormat(columnsFormat[n],o[n]);
        }
        arr.push(o);
    }
    return arr;
}


function getDataFormat( type,data ){
    if( type == null || type == '' ){
        return data;
    }

    if( type < 5 ){
        var date = new Date(parseInt(data));
        date = getDateJson(date);
        if( type == 1 ){
            return date.year+"-"+date.month+"-"+date.day;
        }else if(type == 2){
            return date.year+"年"+date.month+"月"+date.day+'日';
        }else if( type == 3 ){
            return date.year+"-"+date.month+"-"+date.day+" "+date.hours+":"+date.minutes+":"+date.seconds;
        }else if( type == 4 ){
            return date.year+"年"+date.month+"月"+date.day+"日 "+date.hours+"时"+date.minutes+"分"+date.seconds+"秒";
        }
    }else{
        data = app.div(data,app.DIV);
        var number = new Number(data);

        if( type == 5 || type == 6 || type == 7 ){
            number = new Number(number.toFixed(2));
            if( (number+'').indexOf('.') == -1 ){
                number = number.toLocaleString()+".00";
            }else{
                number = number.toLocaleString();
            }

            if( type == 6 ){
                number = '￥'+number;
            }else if( type == 7 ){
                number = '$'+number;
            }
        }else if( type == 8 ){
            number = new Number(number.toFixed(0));
            number = number.toLocaleString();
        }else if( type == 9 ){
            number = digitUppercase(new Number(number));
        }

        return number;
    }
}

function getDateJson(date) {
    return {
        "year": date.getFullYear().toString(),        // 年
        "month": (date.getMonth() + 1).toString(),     // 月
        "day": date.getDate().toString(),            // 日
        "hours": date.getHours().toString(),           // 时
        "minutes": date.getMinutes().toString(),         // 分
        "seconds": date.getSeconds().toString()          // 秒
    };
}

// 下划线转换驼峰
function toHump(name) {
    return name.replace(/\_(\w)/g, function(all, letter){
        return letter.toUpperCase();
    });
}
// 驼峰转换下划线
function toLine(name) {
    return name.replace(/([A-Z])/g,"_$1").toLowerCase();
}

function digitUppercase(n) {

    var fraction = ['角', '分'];
    var digit = [
        '零', '壹', '贰', '叁', '肆',
        '伍', '陆', '柒', '捌', '玖'
    ];
    var unit = [
        ['元', '万', '亿'],
        ['', '拾', '佰', '仟']
    ];
    var head = n < 0 ? '欠' : '';
    n = Math.abs(n);
    var s = '';
    for (var i = 0; i < fraction.length; i++) {
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
    }
    s = s || '整';
    n = Math.floor(n);
    for (var i = 0; i < unit[0].length && n > 0; i++) {
        var p = '';
        for (var j = 0; j < unit[1].length && n > 0; j++) {
            p = digit[n % 10] + unit[1][j] + p;
            n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
    }
    return head + s.replace(/(零.)*零元/, '元')
        .replace(/(零.)+/g, '零')
        .replace(/^整$/, '零元整');
};

</script>